<template>
  <!-- 右侧班级图库 -->
  <el-main class="gallery-container">
    <div v-if="display == 0" style="margin: 20px 0px">
      <!-- 主题内容 -->
      <el-main class="theme-container">
        <!-- 主题 -->
        <div class="theme-each">
          <!-- 文本介绍 -->
          <span class="theme-text" style="bottom: 30px; font-size: 15px"
            >创建主题</span
          >
          <span class="theme-text" style="bottom: 10px; font-size: 13px"
            >记录我们美好的瞬间</span
          >

          <!-- 添加相册 -->
          <button class="theme-add" @click="mask = true">
            <i class="el-icon-plus"></i>
          </button>
        </div>

        <!-- 历史相册 -->
        <div
          class="theme-each"
          @click="delivery(item), switchDisplay(1)"
          :key="index"
          v-for="(item, index) in ListData"
        >
          <!-- 相册简略照片 -->
          <div class="theme-gallery" v-if="divShow">
            <!-- 小照片 -->
            <img
              class="theme-img"
              :src="`${src1 + itemm}`"
              :key="indexx"
              v-for="(itemm, indexx) in item.data.slice(0, 4)"
            />
          </div>

          <div class="theme-infor" @click.stop="">
            <div class="theme-top">
              <edit :val="item">
                <button slot="button" class="btn">
                  <i class="el-icon-edit-outline" style="font-size: 14px"></i>
                </button>

                <button slot="save" class="btn">
                  <i class="el-icon-circle-check" style="font-size: 14px"></i>
                </button>

                <button slot="cancel" class="btn">
                  <i class="el-icon-circle-close" style="font-size: 14px"></i>
                </button>
              </edit>
            </div>

            <div style="font-size: 14px; color: rgba(56, 56, 55, 0.6)">
              {{ item.gradeId }}
            </div>
          </div>
        </div>
      </el-main>

      <el-main class="mask" v-if="mask">
        <div class="mask-background-top">
          <div class="mask-top">主题名称</div>
          <div class="mask-middle">
            <div class="middle-text">相册名</div>
            <input
              class="middle-input"
              type="text"
              placeholder="请输入内容"
              v-model="inputGalleryName"
            />
          </div>
          <!-- <div class="mask-middle"> 
            <div class="middle-text">相册Id</div>
            <input
              class="middle-input"
              type="number"
              placeholder="请输入内容"
              v-model="inputGradeId"
            />
          </div> -->

          <div class="mask-bottom">
            <button class="bottom-left" @click="submit">确定</button>
            <button class="bottom-right" @click="mask = false">取消</button>
          </div>
        </div>
      </el-main>
    </div>

    <gallery v-if="display == 1" :val="this.deliverryData">
      <div slot="back" @click="(switchDisplay(0), getClassGallery())">
        <i class="el-icon-arrow-left" style="font-size: 16px"></i>
        <button style="border: 0px; background: #fff; font-size: 16px">
          返回
        </button>
      </div>
    </gallery>
  </el-main>
</template>

<script>
import edit from "./edit";
import gallery from "./gallery";
import module from "@/allurlimg/img";

import {
  LeadGrade,
  getgradegallery,
  getGallery,
  addGallery,
} from "@/api/myInfoTeacher/gradegallery";

export default {
  components: {
    edit,
    gallery,
  },

  data() {
    return {
      src1: "",
      Data: [], // 信息
      ListData: [], // 整合数据
      GalleryData: [], // 图片库
      deliveryData: [], // 传输数据

      mask: false, // 幕布
      inputGalleryName: "", // 新建相册名
      inputGradeId: "", // 新建相册Id

      display: 0, // 展示内容
      grade: "", // 班级信息
      gradeList: [], // 班级列表
      divShow: true
    };
  },
  mounted() {
    this.getLeadGrade()
    this.getClassGallery();
    this.src1 = module.host;
  },

  methods: {
    // 点击切换显示内容
    switchDisplay(id) {
      this.display = id;
    },

    // 提交
    submit() {
      this.mask = !this.mask;
      // console.log("傻瓜蛋子", this.inputGalleryName, this.inputGradeId);
      this.addClassGallery(this.inputGalleryName);
      (this.inputGradeId = 0), (this.inputGalleryName = "");
    },

    // 进入图库
    delivery(data) {
      this.deliverryData = data;
      // console.log(this.deliverryData, "deliverryData");
    },

    // 获取担任班主任的班级
    async getLeadGrade() {
      const res = await LeadGrade();
      console.log(res, 'LeadGrade')
      
      if (res.data == undefined) {
        this.$message.error("数据库错误请检查");
      } else if (res.data.length == 0) {
        this.$message("您不是班主任");
      } else {
        for (const key in res.data) {
          console.log(res.data[key], 'key')
          this.gradeList.push(res.data[key]);
        }
        this.grade = this.gradeList[this.gradeList.length - 1];
        console.log(this.Grade, 'Grade')
        console.log(this.GradeList, 'GradeList')
      }
    },

    // 查看班级图库及历史图库
    async getClassGallery() {
      const res = await getgradegallery();

      if (res.data == undefined) {
        this.$message.error("数据库错误请检查");
      } else if (res.data.length == 0) {
        this.$message("相册为空请添加");
        this.ListData = [];
        this.GalleryData = [];
      } else {
        this.Data = res.data;
        for (const key in res.data) {
          // console.log(this.Data[key].galleryId)
          this.getGalleryData(res.data[key].galleryId);
        }
      }
    },

    // 根据galleryId 获取图库中图片
    async getGalleryData(galleryId) {
      this.ListData = [];
      this.GalleryData = [];
      // console.log(galleryId);
      const res = await getGallery(galleryId);
      // console.log(res, "getGalleryData");
      this.GalleryData.push({
        data: res.data,
        galleryId: galleryId,
      });

      if (this.GalleryData.length > this.Data.length - 1) {
        for (const key in this.Data) {
          // console.log(this.Data[key].galleryId, 'data')
          for (const Index in this.GalleryData) {
            // console.log(this.GalleryData[Index].galleryId, 'gallery')
            if (this.Data[key].galleryId == this.GalleryData[Index].galleryId) {
              this.ListData.push({
                galleryId: this.Data[key].galleryId,
                galleryName: this.Data[key].galleryName,
                gradeId: this.Data[key].gradeId / 100,
                semesterId: this.Data[key].semesterId,
                data: this.GalleryData[Index].data,
              });
            }
          }
        }
        // console.log(this.ListData, "ListData");
        // console.log(this.GalleryData, "GalleryData");
      }
    },

    // 新增班级图库
    async addClassGallery(galleryName, gradeId) {
      const dataTest = {
        galleryName: galleryName,
        gradeId: this.grade,
      };
      const res = await addGallery(dataTest);
      // console.log(res, "addClassGallery");
      this.getClassGallery();
    },

    // 获取所带班级及在班级中的岗位
    async getGradeList() {
      const res = await getGrade();
      // console.log(res, 'getGradeList')
      for (const key in res.data) {
        this.GradeList.push(res.data[key]);
      }
      // console.log(this.GradeList, 'GradeList')
      this.Grade = this.GradeList[this.GradeList.length - 1];
    },
  },
};
</script>


<style scoped>
.el-header {
  padding: 0px;
}
.el-main {
  padding: 0px;
}

/* 右侧班级图库 */
.gallery-container {
  width: 100%;
  margin: 2.5rem 0px;
  padding: 0;
  border: 1px solid #f5f5f5;
}

/* 主题内容 */
.theme-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* 主题 */
.theme-each {
  display: flex;
  flex-direction: row;
  width: 13.75rem;
  height: 7.5rem;
  border: 2px solid #f5f5f5;
  position: relative;
  margin: 0.625rem 1.25rem 2.5rem 1.25rem;
}

/* 文本介绍 */
.theme-text {
  position: absolute;
  left: 0.625rem;
  color: rgb(0, 0, 0, 0.8);
}

/* 添加相册 */
.theme-add {
  border: 0px;
  background: #fff;
  position: absolute;
  right: 0.625rem;
  top: 5rem;
  font-size: 1.625rem;
  color: rgb(0, 0, 0, 0.4);
  justify-content: center;
}

/* 相册简略照片 */
.theme-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  margin: 1rem;
  width: 5.25rem;
}

/* 小照片 */
.theme-img {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0px 0.125rem 0.125rem 0px;
  border-radius: 4px;
}

.theme-infor {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.theme-top {
  padding: 0.625rem 0;
  display: flex;
  flex-direction: row;
  align-content: center;
}

.btn {
  border: 0;
  width: 1rem;
  height: 1rem;
  background: #fff;
}

/* 弹框幕布 */
.mask {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  background: rgba(56, 55, 55, 0.651);
}

.mask-background-top {
  width: 37.5rem;
  display: flex;
  border-radius: 10px;
  background: #fff;
  flex-direction: column;
  border: 2px solid rgba(56, 55, 55, 0.4);
}

.mask-top {
  width: 100%;
  padding: 1rem;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(56, 55, 55, 0.1);
}

.mask-middle {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 0.375rem 0px 0.625rem 0px;
}

.middle-text {
  display: flex;
  font-size: 1rem;
  margin: 0.625rem;
  width: 3.75rem;
}

.middle-input {
  height: 3.125rem;
  border-radius: 5px;
  margin: 0.625rem;
  border: 1px solid rgba(56, 55, 55, 0.5);
}

.mask-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 0.625rem 0 1.25rem 0;
}

.bottom-left {
  width: 7.5rem;
  height: 3.125rem;
  display: flex;
  border-radius: 5px;
  align-items: center;
  justify-content: center;

  border: 0px;
  color: #ffffff;
  background: #7c0000;
}

.bottom-right {
  width: 7.5rem;
  height: 3.125rem;
  display: flex;
  border-radius: 5px;
  align-items: center;
  justify-content: center;

  color: #000000;
  margin-left: 5.625rem;
  background: #ffffff;
  border: 1px solid rgba(56, 55, 55, 0.3);
}
</style>